/* eslint-disable @typescript-eslint/ban-ts-comment */
import React, { useState } from 'react';
import Strings from '@/i18n';
import { useProps } from '@ray-js/panel-sdk';
import { publishDps, showToast, View, Image } from '@ray-js/ray';
import { NavBarCustom } from '@/components/NavBarCustom';
import { useSelector } from 'react-redux';
import { ReduxState } from '@/redux';
import { useSwitchInfo } from '@/hooks/useSwitchInfo';
import styles from './index.module.less';
import res from '@/res/images';
import CountdownActionSheet from '@ray-js/countdown-action-sheet';

import { formatTimeString } from '@/utils/timer';
import { useWaterControlInfo } from '@/hooks/useWaterControlInfo';

export const decodeArea = (area: string) => {
  // 将十六进制字符串转换为8位二进制字符串
  const binary = parseInt(area, 16).toString(2).padStart(8, '0');
  return binary.split('').reverse().join('');
};

// 添加encodeArea方法，将8位二进制字符串转换为十六进制字符串
export const encodeArea = (binary: string) => {
  // 将二进制字符串转换为2位十六进制字符串
  return parseInt(binary, 2).toString(16).padStart(2, '0');
};

const DrugSet: React.FC = () => {
  const props = useProps();

  const [showCountDown, setShowCountDown] = useState(false);

  const [selected, setSelected] = useState('');

  const dps = useWaterControlInfo().filter(group => !group.hide || group.isOffLine);

  const durgDps = ['countdown_2', 'countdown_4', 'countdown_6', 'usb_countdown_2', 'countdown_10'];

  const showDevie = dps.map(item => {
    return item.drug;
  });

  return (
    <View className={styles.view}>
      <NavBarCustom name={Strings.getLang('drugSet')} back />
      <View className={styles.content}>
        <View className={styles.optionBox}>
          {showDevie.map((item, index) => {
            return (
              <View
                className={styles.option}
                key={item.dpId}
                onClick={() => {
                  setSelected(item.timerDpName);
                  setShowCountDown(true);
                }}
              >
                <View className={styles.optionName}>{`${item?.name}`}</View>

                <View className={styles.optionContent}>
                  <View>{Strings.getLang('drugTime')}</View>

                  <View className={styles.optionTime}>
                    <View className={styles.time}>{formatTimeString(props[item.timerDpName])}</View>
                    <Image src={res.arrow} className={styles.arrow} />
                  </View>
                </View>
              </View>
            );
          })}
        </View>
      </View>

      <CountdownActionSheet
        show={showCountDown}
        value={props[selected] ?? 1}
        isSetModeOnly
        // mode="set"
        title={Strings.getLang('drugTime')}
        cancelText={Strings.getLang('cancel')}
        okText={Strings.getLang('confirm')}
        hourText={Strings.getLang('hour')}
        minuteText={Strings.getLang('min')}
        onClickOverlay={() => setShowCountDown(false)}
        onCancel={() => setShowCountDown(false)}
        onStop={() => {
          // setCountDown(0);
          setShowCountDown(false);
        }}
        onOk={parmas => {
          if (parmas.value === 0) {
            showToast({
              title: '喷药时间需要大于0',
              icon: 'none',
            });
            return;
          }

          publishDps({
            [selected]: parmas.value,
          });

          setShowCountDown(false);
        }}
      />
    </View>
  );
};

export default DrugSet;
